var pageObj
if (localStorage.getItem("data1")) {
    pageObj = JSON.parse(localStorage.getItem("data1"))
} else {
    pageObj = [
        {
            leftStar: 0,
            topNumArr: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
            leftNumArr: ["04", "05", "09", "01", "05", "03", "02", "07", "06", "01", "11", "01", "03", "05", "12", "01", "02", "02", "12", "09", "01", "08", "03", "06", "01", "11", "02", "04", "09", "11", "09", "11", "03", "04", "08", "03", "05", "11", "08", "07", "11", "02", "09", "02", "01", "09", "06", "11", "03", "05", "07", "04", "10", "09", "08", "12", "09", "11", "04", "06", "08", "08", "04", "05", "04", "07", "09", "02", "09", "12", "07", "02", "03", "11", "01", "02", "09", "08", "10", "02", "05", "11", "06", "01", "08", "02", "12", "06", "11", "01", "01", "09", "10", "05", "10", "11", "05", "01", "12"]
        },//page1
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page2
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page3
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page4
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page5
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page6
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page7
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page8
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page9
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page10
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page11
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page12
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page13
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page14
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page15
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page16
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page17
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page18
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page19
        {
            leftStar: 0,
            topNumArr: [],
            leftNumArr: []
        },//page20
    ]

}
var topNumArr = pageObj[0].topNumArr
// var leftNumArr = 
var leftNumArr = pageObj[0].leftNumArr
var leftStar = pageObj[0].leftStar
var prePage = 1
var changeType = 0
var changeIndex = 0
var canvasNum = 0
var spead = 30

function init() {
    //渲染顶部页数
    var pageStr = ''
    for (var i = 1; i <= 20; i++) {
        if (i == prePage) {
            pageStr += '<li class="active" ip="' + i + '">' + fill(i) + '</li>'
        } else {

            pageStr += '<li ip="' + i + '">' + fill(i) + '</li>'
        }
    }
    $("#page").html(pageStr)





    topNum()
    leftNum()
    contentNum()
    canvas(100000)
    // canvas(canvasNum, $("#content").height())
}
init()

function leftleftNum() {
    //渲染左部行数
    var leftStr = ''
    for (var k = leftStar; k < leftStar + 100; k++) {
        leftStr += '<li>' + fill(k % 100) + '</li>'
    }
    $("#left").html(leftStr)
}
function topNum() { //渲染顶部号码
    var topStr = '<li>号码</li>'
    for (var j = 0; j < 12; j++) {
        topStr += '<li ip="' + j + '">' + fill(topNumArr[j]) + '</li>'
    }
    $("#top").html(topStr)
    $("#bottom").html(
        '<p id="clearleft">横</p>' +
        '<p id="clearright">竖</p>' +
        topStr
    )
    save()
}

function leftNum() {//渲染左部自定义数字
    var leftnumStr = ''
    for (var k = leftStar; k < (leftStar + 100); k++) {
        leftnumStr += '<li ip="' + k + '">' + fill(leftNumArr[k - leftStar]) + '</li>'
    }
    $("#leftnum").html(leftnumStr)
    save()
    leftleftNum()
}

function contentNum() {//渲染整个区域
    var contentStr = ''
    for (var l = 0; l < 100; l++) {
        contentStr += '<ul class="clearfix">'
        for (var n = 0; n < 12; n++) {
            if (leftNumArr[l] == topNumArr[n] && leftNumArr[l] != undefined) {
                contentStr += '<li><span>' + fill(leftNumArr[l]) + '</span></li>'
            } else {
                contentStr += '<li>&nbsp;</li>'

            }
        }
        contentStr += '</ul>'
    }
    $("#content").html(contentStr + '<canvas id="myCanvas"></canvas>')
    save()
}

function fill(n) {//填充0
    if (n == null) return '&nbsp;'
    var num = Number(n)
    if (isNaN(num)) return '&nbsp;'
    return num > 9 ? num + '' : "0" + num;
}

$("#top").on('click', function (e) {//修改行
    if (e.target.nodeName != 'LI') return
    $('.enter').css("display", "block")
    changeType = 0
    changeIndex = $(e.target).attr('ip')
    if (isNaN(Number($(e.target).html()))) {
        $("#input").val('')

    } else {
        $("#input").val($(e.target).html())
    }
})
$("#leftnum").on('click', function (e) {//修改列
    if (e.target.nodeName != 'LI') return
    $('.enter').css("display", "block")
    changeType = 1
    changeIndex = $(e.target).attr('ip')
    if (isNaN(Number($(e.target).html()))) {
        $("#input").val('')

    } else {
        $("#input").val($(e.target).html())
    }
})

$("#btnsure").on('click', function (e) {//确认输入
    $('.enter').css("display", "none")
    if ($("#input").val() == '') return
    if (changeType == 0) {
        if (topNumArr.indexOf(fill($("#input").val())) != -1) {
            alert("您输入的数字已重复")
            return;
        }
        topNumArr[changeIndex] = fill($("#input").val())
        topNum()
    } else {
        if (topNumArr.indexOf(fill($("#input").val())) == -1) {
            alert("您输入的" + fill($("#input").val()) + "不在横栏范围内")
            return;
        }
        if (changeIndex - leftStar == 99) {
            leftStar++
            leftNumArr.shift()
        }
        leftNumArr[changeIndex - leftStar] = fill($("#input").val())
        leftNum()
        leftleftNum()
    }
    contentNum()
    canvas(100000)
})
$("#page").on('click', function (e) {//修改页码
    if (e.target.nodeName != 'LI') return

    pageObj[prePage - 1].topNumArr = topNumArr
    pageObj[prePage - 1].leftNumArr = leftNumArr
    pageObj[prePage - 1].leftStar = leftStar
    var n = $(e.target).attr("ip")
    prePage = n
    topNumArr = pageObj[n - 1].topNumArr
    leftNumArr = pageObj[n - 1].leftNumArr
    leftStar = pageObj[n - 1].leftStar
    init()
})


// var arr = []
// var arr1 = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
// for (var i = 0; i < 100; i++){
//     var n = Math.floor(Math.random()*12)
//     arr.push(arr1[n])
// }
var timer = null
var canvasing = false//是否在运动

var width = document.documentElement.clientWidth || document.body.clientWidth;
var ps = width / 7.2;


function canvas(n) {//动起来
    var cv = document.getElementById('myCanvas');
    cv.height = $("#content").height()
    cv.width = $("#content").width()
    var ctx = cv.getContext('2d');
    ctx.translate(0, 0)
    ctx.strokeStyle = "#ff4d4d";
    ctx.lineWidth = .5;
    ctx.beginPath();
    var w = ($("#top li").width() / 2 + 2)
    for (var i = 0; i < 100; i++) {
        if (leftNumArr[i] != undefined && leftNumArr[i + 1] != undefined) {
            var index1 = topNumArr.indexOf(leftNumArr[i])
            var index2 = topNumArr.indexOf(leftNumArr[i + 1])
            var beginX = (index1 + .5) * w;
            var beginY = $("#content ul").eq(i).position().top + 15;
            var lineToX = (index2 + .5) * w;
            var lineToY = $("#content ul").eq(i + 1).position().top + 15;
            draw(beginX, beginY, lineToX, lineToY)
        }
    }
    ctx.closePath()
    function draw(beginX, beginY, lineToX, lineToY) {
        ctx.moveTo(beginX, beginY);
        ctx.lineTo(lineToX, lineToY);
        ctx.stroke();
    }


    //掩盖不需要显示部分，突出动画效果
    ctx.beginPath();
    ctx.fillStyle = '#f5f5f5'
    ctx.fillRect(0, n, $("#content").width(), ($("#content").height()) - n);
    ctx.closePath()
    //掩盖完毕

    canvasNum++
    clearTimeout(timer)
    console.log(canvasNum < $("#content").height() && canvasing)
    if (canvasNum < $("#content").height() && canvasing) {
        $("html").scrollTop(canvasNum - 200);
        timer = setTimeout(function () {
            canvas(canvasNum)
        }, spead)
    } else {
        clearTimeout(timer)
    }
}


function save() {
    pageObj[prePage - 1].topNumArr = topNumArr
    pageObj[prePage - 1].leftNumArr = leftNumArr
    pageObj[prePage - 1].leftStar = leftStar
    localStorage.setItem("data1", JSON.stringify(pageObj))
}

$("#img").on("click", function () {
    canvasing = !canvasing
    clearTimeout(timer)
    if (canvasing) {
        $("#img").removeClass('img')
        $("#img").addClass('position')
        canvas(canvasNum)
    } else {
        $("#img").removeClass('position')
        $("#img").addClass('img')
    }
})



$("#bottom").on('click', function (e) {//修改页码
    if (e.target.nodeName != 'LI') return
    $("#bottom li").removeClass('active')
    $(e.target).addClass("active")

})
$("#clearleft").on('click', function () {
    topNumArr = []
    topNum()
})

$("#clearright").on('click', function () {
    leftNumArr = []
    leftNum()
})

